<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/playlist.css">
	<title>歌单</title>
	<link rel="icon" href="./img/favicon.ico">
</head>
<body>
	<div id="logincover">
		<div class="login-inter">
			<img src="./img/关闭.png" id="clo">
			<a href="login.html">去注册</a>
			<div class="row">
				<div class="cur" id="col">短信登录</div>
				<div id="col">密码登陆</div>
				<div id="col">SIM登录</div>
			</div>
			<div id="hint">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>手机号格式不正确</span>
				<span>手机号可用</span>
			</div>
			<div id="phon">
			<input placeholder="手机号">
			<div class="row">
				<div class="col-7">
					<input placeholder="请输入验证码"/>
				</div>
				<div class="col-5">
					<p>获取验证码</p>
				</div>
			</div>
			<p>登录</p>
			</div>
			<div id="pwd">
				<input placeholder="手机号/邮箱/用户名">
				<input placeholder="密码">
				<div id="sign">
						<div class="col">
							<input type="checkbox"/>
							<span>自动登录</span>
						</div>
						<div class="col">
							<span>忘记密码</span>
							<span>|</span>
							<a href="login.html">注册</a>
						</div>
				</div>
				<div id="tisi">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>密码长度在5~12位</span>
				<span>密码长度符合</span>
				</div>
				<p>登录</p>
				<span>手机号或密码不正确</span>
			</div>
			<div id="SIM">
				<input placeholder="手机号">
				<p>登录</p>
				<span>温馨提示：</span>
				<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
				<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
			</div>
			<div class="text">
				登录即同意<span>《咪咕用户服务协议》</span>
				和<span>《咪咕隐私权政策》</span>
			</div>
		</div>
	</div>
	<div class="header">
	<!-- 一楼 -->
	<div class="f1">
		<div class="container">
			<div class="row">
				<div class="col-1">
					<img src="./img/210928004729927_188x50_4237.png" >
				</div>
				<div class="col-7">
					<ul>
						<li><a href="#">音乐</a></li>
						<li><a href="#">现场</a></li>
						<li><a href="vip.html">
						<img src="img/皇冠.png" >
						会员中心
						</a></li>
						<li><a href="fanxiang.html">凡响计划</a></li>
						<li><a href="#">客户端下载</a></li>
					</ul>
				</div>
				<div class="col-4">
					<input placeholder="搜索歌曲、歌手、MV">
					<img src="img/206搜索-线性.png" >
					<div>
					<img src="./img/no-login.png" >
					<div class="log_popup">
						<p><span>一</span>登录后可专享<span>一</span></p>
						<div class="row">
							<div class="col-4">
								<img src="./img/乐谱编辑.png">
								<p>试听记录同步</p>
							</div>
							<div class="col-4">
								<img src="./img/彩铃.png">
								<p>订购酷炫铃音</p>
							</div>
							<div class="col-4">
								<img src="./img/无损音质.png">
								<p>下载无损音乐</p>
							</div>
						</div>
						<div class="row">
							<div class="col-6">
								<span class="lgin">登陆</span>
								</div>
							<div class="col-6">
								<span><a href="login.html">注册</a></span>
								</div>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 二楼 -->
	<div class="f2">
		<div class="contaienr">
					<ul class="cur">
						<li><a href="homepage.html">首页</a></li>
						<li><a href="#">歌单</a></li>
						<li><a href="special-issue.html">专辑</a></li>
						<li><a href="hot.html">榜单</a></li>
						<li><a href="singer.html">歌手</a></li>
						<li><a href="crbt.html">彩铃</a></li>
						<li><a href="hardware.html">咪咕周边</a></li>
					</ul>
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">演唱会</a></li>
						<li><a href="#">独家放送</a></li>
						<li><a href="#">MV</a></li>
					</ul>
		</div>
	</div>
	</div>
	<!-- 三楼 -->
	<div class="f3">
		<div class="container-fluid">
		<div class="container">
			<img src="./img/向左箭头.png">
			<img src="./img/向右箭头.png">
			<div class="row">
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/5eb0022a-438f-44b8-bcd3-6bfb2398688a.png" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									50.5w
								</div>
							<span>解压|听歌是情绪的抚慰</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/9606c810-26d6-47e5-a862-1a5bfab08894.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									46.7w
								</div>
							<span>思乡|新年将至，归乡心切</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/5ddc5398-70c7-4a83-9549-5480a1f12144.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									163.0w
								</div>
							<span>金典老歌|任时光匆匆流去</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/8982e2bc-cd88-4da0-839a-a7e8e41a81b4.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									167.9w
								</div>
							<span>华语经典|那段旋律承载的故事</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/b08e89b5-1f76-4dbd-b3ff-c9dcb98337ca.png" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									61.1w
								</div>
							<span>嘻哈|Swag满满的韩国rappe...</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/6b2f1392-7ae9-47ef-9b9d-f3108d5110bd.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									208.3w
								</div>
							<span>致敬1994|华语音乐史上...</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/73bd7b33-ce5b-421e-82cf-9a189c5bfecf.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									73.3w
								</div>
							<span>社恐必备 | 耳机一戴，谁都不睬</span>
							</div>
						</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="imgbox">
							<img src="./img/bc375289-7033-4b6b-a96a-cb93bec95cb9.jpg" >
							<div class="shadow">
								<div class="cont">
									<img src="img/icon-music.png" >
									81.0w
								</div>
							<span>关于城市里的那些我爱你都在这</span>
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		</div>
	</div>
	<!-- 四楼 -->
	<div class="f4">
		<div class="container">
			<ul>
				<li><a href="#">小清新</a></li>
				<li><a href="#">电视剧</a></li>
				<li><a href="#">民谣</a></li>
				<li><a href="#">旅行</a></li>
				<li><a href="#">思念</a></li>
				<li><a href="#">更多</a>
				<img src="./img/向右箭头1.png" >
				</li>
			</ul>
			<p>最新</p>
			<div class="row">
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/823a2175-7a6a-4a26-ae5c-f7dd718af5ec.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								51.4w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							虎年鸿运：承牛年好运...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/418e754d-08ae-4b83-b671-15a4d0b30a8a.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								46.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							赛博朋克：穿越次元...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/9606c810-26d6-47e5-a862-1a5bfab08894%20(1).jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								46.8w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							思乡：新年将至，归乡...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="img/395bc66d-6d29-4f78-b240-395b2feb2f97.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								58.8w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							民谣：素色流年，往昔...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/8cbc1a6d-0bfa-4055-9f72-ec4654b34f32.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								59.3w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							宇宙穿梭：置身于无际...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/f5cdea16-62f0-49ed-8b9f-997a72a906c6.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								58.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							欧美男声：挤地铁时的...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/f2150ca9-b474-490d-b7e1-48ab2c174690.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								77.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							国风流行：浮云吹雪...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/721fbaa9-5525-4333-ba6d-e28907db7432.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								54.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							电子：金属脉冲，拨动...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/116a1cef-cf4d-4c99-8d0c-6150cdd982bc.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								58.7w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							来电铃声：喂，还不接...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/46b99d66-a8e6-4c10-92b2-516ed48d56fc.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								41.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							私藏快乐：吧唧一口...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/55728f0c-0c8e-488f-9476-1ad607918fde.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								44.6w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							华语：冬日寒风凛冽...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/ca7c05d9-4eef-4698-8506-fcb8d90ebf6c.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								127.2w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							华语：男女对唱流行新...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/9f20fdcb-b073-4aee-ba04-7fe7d07de9e1.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								65.9w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							下午茶：舒缓疲惫，独...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/82975e92-6c79-4661-9092-c424ba4108e1.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								58.3w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							挥手告别：分别后的孤...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/79427.png" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								68.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							古典治愈：舒缓平常的...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/d606ad10-bd8a-44b6-ab1f-b3add6c34649.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								64.7w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							国风：浮云起有落...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/d024cd17-0615-4dff-bbfe-3dc53a40a342.png" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								5.1w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							粤语入坑：永远有首歌...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="img/b2621935-6c9b-47be-9785-a7d4a7de6d62.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								65.0w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							冥想纯音：自我治愈...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/9246a262-001f-4237-935e-a0f3f726bbe6.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								43.7w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							潮流组合：用音乐歌唱...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/318272ae-6120-4d0b-b2f5-57444ff9f700.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								87.3w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							治愈流行：温柔的晚风...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/51227256-e23d-405d-9224-f65077dbe011.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								66.3w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							耳机避风港：情绪收回...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/a85d1cef-484c-430f-88d4-102ca2950efb.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								58.8w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							瑜伽：修身养性，禅定...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/232a91eb-338d-4c1e-91fa-acad7e76c450.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								89.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							高音天籁：爆发瞬间震...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/3d68c46b-906a-4141-970c-888ed55ca85b.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								85.7w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							欧美节奏曲：燃烧激情...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/aa09e54d-3fc3-49f6-af11-2147c2fd9abe.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								65.8w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							蓝调：冬日窝在被窝里...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/af4f1405-38b6-4d61-a9f0-e3c290acfa91.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								644.2w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							90后经典：流行多年...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/7234b3cb-ed8a-4a26-a65e-eee72d2a1b60.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								54.7w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							清空购物车：我想收到...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/13d3d974-47ac-40c7-9372-02aad435a75d.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								79.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							游戏：BUFF一开，冠...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/b7d323f5-9976-40dc-99f4-558da1d6c5de.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								42.5w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							粤语：岁月在发酵，经...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
				<div class="col-2">
					<div class="box">
						<div class="spin-box">
						<div class="imgbox">
							<img src="./img/2323e257-f5e2-4a88-9d65-070f212a7f86.jpg" >
							<div class="cover">
								<img src="./img/头戴耳机.png">
								59.3w
							</div>
						</div>
						<div class="record">
							<img src="./img/8e09ec01529ead4b.png" >
							<div class="stop">
								<img src="./img/stop.png" >
							</div>
						</div>
						<div class="pink-left"></div>
						<div class="pink-right"></div>
						</div>
						<div class="tit">
							欧美男声：磁性嗓音...
							<div class="img">
							<img src="./img/爱心.png">
							<img src="./img/添加到.png">
							</div>
							</div>
					</div>
				</div>
			</div>
			<div class="apage">
			<ul>
				<li><a href="#">
				<img src="./img/向左箭头.png" >
				</a></li>
				<li><a href="#">1</a></li>
				<li><a href="#">2</a></li>
				<li><a href="#">3</a></li>
				<li><a href="#">...</a></li>
				<li><a href="#">100</a></li>
				<li><a href="#">
				<img src="./img/向右箭头.png" >
				</a></li>
			</ul>
			</div>
		</div>
	</div>
	<!-- 五楼 -->
	<div class="f5">
		<div class="container">
			<div class="row">
				<div class="col-9">
					<div class="row">
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕文化</a></li>
								<li><a href="#">咪咕文化官网</a></li>
								<li><a href="#">咪咕音乐简介</a></li>
								<li><a href="#">服务协商</a></li>
								<li><a href="#">隐私权政策</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕音乐家族</a></li>
								<li><a href="#">圈子彩铃</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">联系我们</a></li>
								<li><a href="#">业务合作</a></li>
								<li><a href="#">常见问题</a></li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-3">
							<p>咪咕客户端</p>
					<div class="row">
						<div class="col-6">
							<img src="img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col-6">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
			</div>
			<p><img src="img/201012095135561_48x48_9661.png" ></p>
			<div class="ending">
				<div class="span">
				<span>蜀ICP备15012512号</span>
				<span>川网文[2019]2118-124</span>
				<span>网络视听许可证0112648号1</span>
				<span>增值业务许可证A2.B1.B2-2010000</span>
				<span>川公网安备 51010702002209号</span>
				</div>
				<div class="p">
					<span>Copyright © 2005 - 2022 咪咕音乐有限公司</span>
				</div>
			</div>
		</div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
		let i=0
	$('.f3 .container>img:nth-child(2)').click(function(){
		i++
		if(i>2){
			i=2
			return
		}
		$('.f3 .col-2:first-child').stop(true).animate({marginLeft:i*-205+'px'})
	})
	$('.f3 .container>img:first-child').click(function(){
		i--
		if(i<0){
			i=0
			return
		}
		$('.f3 .col-2:first-child').stop(true).animate({marginLeft:i*-205+'px'})
	})
	$('.header').on('mouseover','a',function(){
			if($(this).text()=='现场'){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
			}
			if($(this).text()=='音乐'){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
			}
		})
		$('.header').mouseleave(function(){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
		})
	$('.f1 .container>.row>.col-4>div').mouseover(function(){
		$('.f1 .log_popup').stop(true).show(300)
	})
	$('.f1 .container>.row>.col-4>div').mouseleave(function(){
		$('.f1 .log_popup').stop(true).hide(300)
	})
	// 登陆
	const lgin=document.querySelector('.lgin')
	lgin.onclick=()=>{
			logincover.style=`display: flex;`
		}
		clo.onclick=()=>{
			logincover.style=`display: none;`
		}
		$('.login-inter>div>input:first-child').on('input',function(){
				if($(this).val()==''){
					$('#hint').prop('class','')
					return
				}
			if(/^1[3-9]\d{9}$/.test($(this).val())){
				$('#hint').prop('class','ok')
			}else{
				$('#hint').prop('class','err')
			}
		})
		$('.login-inter>div>input:first-child').blur(function(){
			$('#hint').prop('class','')
		})
		$('#pwd>input:nth-of-type(2)').on('input',function(){
			const l=$(this).val()
			if(l==''){
				$('#tisi').prop('class','')
				return
			}
			if(l.length>12 || l.length<5){
				$('#tisi').prop('class','err')
			}else{
				$('#tisi').prop('class','ok')
			}
		})
		$('#pwd>input:nth-of-type(2)').blur(function(){
			$('#tisi').prop('class','')
		})
		// $('#pwd>p').click(function(){
		// 	let p=$('#pwd>input:first-child').val()
		// 	let w=$('#pwd>input:nth-of-type(2)').val()
		// 	let xhr=new XMLHttpRequest()
		// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
		// 	xhr.send()
		// 	xhr.onload=()=>{
		// 		console.log(xhr.responseText)
		// 		if(xhr.responseText=='err'){
		// 			$('#pwd>span').prop('class','err')
		// 		}
		// 	}
		// })
		$('.login-inter>.row').on('click','div',function(){
			$(this).addClass('cur').siblings().removeClass('cur')
			if($(this).text()=='短信登录'){
				phon.style.display=''
				pwd.style.display='none'
				SIM.style.display='none'
			}
			if($(this).text()=='密码登陆'){
				phon.style.display='none'
				pwd.style.display='block'
				SIM.style.display='none'
			}
			if($(this).text()=='SIM登录'){
				phon.style.display='none'
				pwd.style.display='none'
				SIM.style.display='block'
			}
		})
	</script>
</body>
</html>
